<template>
    <div class="refund-detail">
        <div class="status-bg">
            <p class="status" v-if="status">退款成功</p>
            <p class="status" v-else>退款中</p>
        </div>
        <div class="refund-info">
            <h2>KET考试高分秘笈·7期</h2>
            <p class="status">长期有效</p>
            <div class="refund-mony">
                <p class="money">退款金额: <strong>¥2300</strong></p>
                <router-link to="" tag="p" class="agreement">《VIPKID课程服务协议》</router-link>
            </div>
            <div class="order-info">
                <ul>
                    <li>
                        <span>订单编号:</span>
                        <span>9876555</span>
                    </li>
                     <li>
                        <span>下单时间:</span>
                        <span>2019-05-28  12:46:40</span>
                    </li>
                     <li>
                        <span>支付时间:</span>
                        <span>2019-05-28  12:46:40</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            status:false
        }
    }
}
</script>

<style lang="scss" scoped>
.status-bg {
    height: 2.2rem;
    background: #ff6422;
    .status {
        color:#fff;
        font-size: .44rem;
        margin-left: .72rem;
        padding-top: .52rem;
       
    }
}
.refund-info {
    width: 90%;
    min-height: 2rem;
    border-radius: .20rem;
    background: #fff;
    position: absolute;
    top:1.35rem;
    left:5%;
     padding: .40rem 0;
   
    h2 {
        font-size: .36rem;
        color: #333;
         padding: 0 .40rem;
      
    }
    p.status {
        color: #999;
        font-size: .28rem;
        padding-top: .20rem;
        padding-bottom: .40rem;
        border-bottom: 1px solid #e5e5e5;
        padding-left: .40rem;
        padding-right: .40rem;
    }
    .refund-mony {
        padding: .45rem .40rem;
        border-bottom: 1px solid #e5e5e5;
        p.money {
            color: #333333;
            font-size: .28rem;
            text-align: right;
            strong {
                color: #ff6422;
                font-weight: bold;
                 font-size: .28rem;
            }
        }
        p.agreement {
            font-size: .24rem;
            color: #ff6422;
            text-align: right;
            padding-top: .25rem;
        }
    }
    .order-info {
        padding:.36rem .40rem;
        ul {
            li {
                margin-bottom: .20rem;
                span {
                    font-size: .28rem;
                    &:nth-child(1) {
                        color: #333;
                    }
                      &:nth-child(2) {
                        color: #999;
                    }
                }
                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style>

